import {Component, OnInit, Input,  SimpleChanges} from '@angular/core';
import {DataSourceService} from '../../../../service/data-source/data-source.service';
import {DatePipe} from '@angular/common';
import {HttpClient} from '@angular/common/http';
import {FarmData} from './wind-direction.model';
import {ApplicationService} from '../../../../service/application.service';

@Component({
  selector: 'app-wind-direction-change',
  templateUrl: './wind-direction-change.component.html',
  styleUrls: ['./wind-direction-change.component.css']
})
export class WindDirectionChangeComponent implements OnInit {

  active = 0;
  @Input() currentFarm: FarmData;
  @Input() titleText: string;
  @Input() startTime: Date;
  @Input() endTime: Date;
  options: any;
  echartsIntance: any;
  data: any[][];

  constructor(
    private application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private http: HttpClient,
  ) {
  }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['currentFarm'] && changes['currentFarm'].currentValue) {
      this.initData();

    }
  }

  initData() {
    this.data = [];
    let farmData: FarmData = this.currentFarm;
    let data: any[][] = [];
    if (!farmData.meanWindSpeed) return false;
    farmData.meanWindSpeed.forEach((temp, index) => {
      const obj: any[] = [temp.time, temp.value];//时间，速度，方向，温度，湿度

      let i = farmData.ambWindDir.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.ambWindDir[i].value)
      } else {
        obj.push(0);
      }
      i = farmData.temperature.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.temperature[i].value);
      } else {
        obj.push(0);
      }
      /* i = farmData.airPressure.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.airPressure[i].value)
      } else {
        obj.push(0);
      } */

      i = farmData.humidity.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.humidity[i].value)
      } else {
        obj.push(0);
      }
      ;
      data.push(obj);
    });
    this.data = data;
    this.initEcharts();


    /* let res: TagData[] = [
      { code: "RPCAL.GD_RP_1_AX637", value: 6, time: this.startTime },
      { code: "RP.GD_RP_1_AmbWindDir", value: 2, time: this.startTime },
      { code: "RPCAL.GD_RP_1_AX638", value: 52, time: this.startTime },
      { code: "RPCAL.GD_RP_1_AX636", value: 4, time: this.startTime },
      { code: "RPCAL.GD_RP_1_MeanWindSpeed", value: 16, time: this.startTime },
      { code: "NACAL.GD_NA_1_MeanWindSpeed", value: 6, time: new Date(this.startTime.getTime() - 200000) },
      { code: "NACAL.GD_NA_1_MeanWindSpeed", value: 21, time: new Date(this.startTime.getTime() + 50000) },
      { code: "RPCAL.GD_RP_1_AX637", value: 6, time: new Date(this.startTime.getTime() + 20000) },
      { code: "RP.GD_RP_1_AmbWindDir", value: 56, time: new Date(this.startTime.getTime() + 20000) },
      { code: "RPCAL.GD_RP_1_MeanWindSpeed", value: 16, time: new Date(this.startTime.getTime() + 20000) },
      { code: "RPCAL.GD_RP_1_AX638", value: 27, time: new Date(this.startTime.getTime() + 20000) },
      { code: "RPCAL.GD_RP_1_AX636", value: 4, time: new Date(this.startTime.getTime() + 20000) },
      { code: "NACAL.GD_NA_1_AX637", value: 26, time: new Date(this.startTime.getTime() + 200000) },
      { code: "NA.GD_NA_1_AmbWindDir", value: 160, time: new Date(this.startTime.getTime() + 200000) },
      { code: "NACAL.GD_NA_1_AX638", value: 42, time: new Date(this.startTime.getTime() + 200000) },
      { code: "NACAL.GD_NA_1_AX636", value: 23, time: new Date(this.startTime.getTime() + 200000) },
      { code: "NACAL.GD_NA_1_AX637", value: 26, time: new Date(this.startTime.getTime() + 50000) },
      { code: "NA.GD_NA_1_AmbWindDir", value: 220, time: new Date(this.startTime.getTime() + 50000) },
      { code: "NACAL.GD_NA_1_AX638", value: 52, time: new Date(this.startTime.getTime() + 50000) },
      { code: "NACAL.GD_NA_1_AX636", value: 23, time: new Date(this.startTime.getTime() + 50000) },
    ];
    farmDatas.forEach((v, i) => {
      let airPressure = res.filter(o => o.code == v.airPressureCode);
      let ambWindDir = res.filter(o => o.code == v.ambWindDirCode);
      let humidity = res.filter(o => o.code == v.humidityCode);
      let temperature = res.filter(o => o.code == v.temperatureCode);
      let meanWindSpeed = res.filter(o => o.code == v.meanWindSpeedCode)
      v.airPressure = airPressure;
      v.ambWindDir = ambWindDir;
      v.humidity = humidity;
      v.temperature = temperature;
      v.meanWindSpeed = meanWindSpeed

    })
    this.farmDatas = farmDatas; */

  }

  initEcharts() {
    let directionMap = {};
    ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'].forEach((v, i) => {
      directionMap[v] = Math.PI / 8 * i;
    });
    var dims = {
      time: 0,
      meanWindSpeed: 1,
      // temperature: 1,
      ambWindDir: 2,
      temperature: 3,
      //airPressure: 4,
      humidity: 4
    };
    var arrowSize = 18;

    function renderArrow(param, api) {
      var point = api.coord([
        api.value(dims.time),
        api.value(dims.meanWindSpeed)
      ]);
      return {
        type: 'path',
        shape: {
          pathData: 'M31 16l-15-15v9h-26v12h26v9z',
          x: -arrowSize / 2,
          y: -arrowSize / 2,
          width: arrowSize,
          height: arrowSize
        },
        //rotation: directionMap[api.value(dims.ambWindDir)],
        rotation: api.value(dims.ambWindDir),
        position: point,
        style: api.style({
          stroke: '#555',
          lineWidth: 1
        })
      };
    }

    this.options = {
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          return [
            this.datePipe.transform(params[0].value[dims.time], 'HH:mm'),
            params[0].marker + '温度' + params[0].value[dims.temperature],
            params[1].marker + '风速：' + params[0].value[dims.meanWindSpeed],
            params[2].marker + '风向：' + params[0].value[dims.ambWindDir],
            //params[3].marker + '气压' + params[0].value[dims.airPressure],
            params[3].marker + '湿度' + params[0].value[dims.humidity]

          ].join('<br>');
        }
      },
      /* legend: {
        show: true,
        orient: 'vertical',
        align: 'right',
        top: 20,
        left: 50,
        z: 100
      }, */
      grid: {
        show: true,
        top: '15%',
        left: 50,
        right: 50,
      },
      xAxis: {
        type: 'time',
        maxInterval: 3600 * 1000 * 24,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: (value, index) => {
            return this.datePipe.transform(new Date(value), 'HH:mm');
          },
        },
        splitLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        interval: 1000 * 60 * 60 * 3,
        min: this.startTime,
        max: this.endTime
      },
      yAxis: [{
        name: '风速(m/s)',
        /* nameLocation: 'middle', */
        //nameGap: 35,
        max: 25,
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        splitLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
        {
          name: '温度/湿度',
          /* nameLocation: 'middle', */
          // nameGap: 35,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          splitLine: {show: false}
        },
        /*  {
           name: '气压',

           axisLine: {
             lineStyle: {
               color: '#fff'
             }
           },
           offset: 50,
           max: 1000,
           axisLabel: {
             textStyle: {
               color: '#fff',
               fontSize: 12
             }
           },
           splitLine: {
             lineStyle: {
               color: '#fff'
             }
           }
         }, */
        {
          axisLine: {show: false},
          axisTick: {show: false},
          axisLabel: {show: false},
          splitLine: {show: false}
        }],
      visualMap: {
        type: 'piecewise',
        // show: false,
        orient: 'horizontal',
        left: 'center',
        bottom: 5,
        textStyle: {
          color: '#fff',
          fontSize: 8
        },
        textGap: 5,
        itemWidth: 15,
        pieces: [{
          gte: 25,
          color: '#fe0000',
          fontSize: 10,
          label: '>=25',

        },
          {
            gte: 21,
            lt: 25,
            color: '#f93600',
            label: '21-25'
          },
          {
            gte: 17,
            lt: 21,
            color: '#f2a800',
            label: '17-21'
          },
          {
            gte: 12,
            lt: 17,
            color: '#fff600',
            label: '12-17'
          },
          {
            gte: 6,
            lt: 12,
            color: '#0900f1',
            label: '6-12'
          },
          {
            lt: 6,
            color: '#36ca34',
            label: '0-6'
          }],
        seriesIndex: 1,
        dimension: 1
      },
      /*  dataZoom: [{
         type: 'inside',
         xAxisIndex: 0,
         minSpan: 5
       }, {
         type: 'slider',
         xAxisIndex: 0,
         minSpan: 5,
         height: 20,
         bottom: 50,
         handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
         handleSize: '120%'
       }], */
      series: [

        {
          type: 'line',
          yAxisIndex: 1,
          name: '温度',
          symbol: 'none',
          encode: {
            x: dims.time,
            y: dims.temperature
          },
          data: this.data,
          z: 2,
          itemStyle: {
            normal: {
              color: '#f52633',
              //borderColor: 'rgba(137,189,2,0.27)',
              borderWidth: 12,
              lineStyle: {
                color: '#f52633'
              }
            }
          },
        },
        {
          type: 'custom',
          yAxisIndex: 0,
          renderItem: renderArrow,
          encode: {
            x: dims.time,
            y: dims.meanWindSpeed
          },
          data: this.data,
          z: 10
        }, {
          type: 'line',
          symbol: 'none',
          yAxisIndex: 0,
          encode: {
            x: dims.time,
            y: dims.meanWindSpeed
          },
          lineStyle: {
            normal: {
              color: '#aaa',
              type: 'dotted'
            }
          },
          data: this.data,
          z: 1
        },
        /* {
          type: 'line',
          name: '气压',
          yAxisIndex: 2,
          encode: {
            x: dims.time,
            y: dims.airPressure
          },
          data: this.data,
          z: 2,

        }, */
        {
          type: 'line',
          yAxisIndex: 1,
          symbol: 'none',
          encode: {
            x: dims.time,
            y: dims.humidity
          },
          data: this.data,
          z: 2,
          itemStyle: {
            normal: {
              color: '#01e037',
              borderColor: 'rgba(137,189,2,0.27)',
              borderWidth: 12,
              lineStyle: {
                color: '#01e037'
              }
            }
          },

        },
      ],
      //color: ['#000', '#ccc', '#f52633', '#f6ff00']
    }

    this.updateEchart();
  }

  //初始化图表数据
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    }
  }

}


// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-direction-change/wind-direction-change.component.ts
